<template>
  <div
    class="w-full max-w-xs bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 p-3 border border-transparent hover:border-gray-200">
    <!-- 主图 -->
    <div class="relative mb-3 overflow-hidden rounded-lg">
      <img :src="item.skus ? item.skus[picIndex].images[0] : ''" alt="商品图片"
        class="w-full aspect-square object-cover cursor-pointer transition-transform duration-500 hover:scale-105">
    </div>

    <!-- 缩略图 -->
    <div class="flex justify-start gap-2 mb-3 w-full">
      <img v-for="(item, index) in item.skus" :key="index" :src="item.images[0]" alt="商品缩略图"
        class="w-10 h-10 object-cover rounded  cursor-pointer transition-all"
        :class="{ 'border-2 border-red-500 ring-red-200': picIndex === index }" @mouseenter="picIndex = index">
    </div>

    <!-- 价格 -->
    <div class="text-red-600 font-bold w-full">
      ￥<span class="text-lg">{{ item.skus[picIndex].price.toFixed(2) }}</span>
    </div>

    <!-- 商品名称 -->
    <div class="mt-1 text-gray-800 line-clamp-2 hover:text-red-600 transition-colors cursor-pointer w-full">
      {{ item.spuName }}
    </div>

    <!-- 销量 -->
    <div class="mt-2 text-gray-500 w-full">
      <span class="text-xs">销量</span> <span class="text-md font-bold text-black">{{ item.totalSales }}</span>
    </div>

    <!-- 商家 -->
    <div class="mt-1 text-xs text-gray-500 w-full">
      <!-- {{ spu.merchant }} -->
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
const { item } = defineProps(['item'])


// 当前显示的图片索引
const picIndex = ref(0);
</script>

<style lang="scss" scoped>
// 商品卡片样式
.product-card {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }
}

// 缩略图样式
.thumbnail {
  transition: all 0.2s ease;

  &:hover {
    transform: scale(1.1);
  }
}
</style>